---
import HeadCommon from "../components/headCommon.astro";
import ThemeToggleButton from "../components/navigation/themeToggleButton.astro";

import "../styles/global.css";
import "../styles/accessibility.css";
---

<head>
  <HeadCommon />
</head>
<main class="h-screen bg-default p-4">
  <div class="grid grid-cols-1 gap-2 sm:gap-4">
    <div>
      <h1 class="py-4 text-4xl font-bold">Colors</h1>
      <ThemeToggleButton />
      <div class="mt-8 grid grid-cols-2 gap-4 font-semibold">
        <div class="bg-neutral p-4">Neutral</div>
        <div class="bg-primary p-4">Primary</div>
        <div class="bg-secondary p-4">Secondary</div>
        <div class="bg-accent p-4">Accent</div>
        <div class="bg-warning p-4">Warning</div>
        <div class="bg-error p-4">Error</div>
        <div class="bg-success p-4">Success</div>
        <div class="bg-info p-4">Info</div>
      </div>
    </div>
    <div>
      <h1 class="py-4 text-4xl font-bold">Typography</h1>
      <p class="text-9xl">Text 9xl</p>
      <p class="text-8xl">Text 8xl</p>
      <p class="text-7xl">Text 7xl</p>
      <p class="text-6xl">Text 6xl</p>
      <p class="text-5xl">Text 5xl</p>
      <p class="text-4xl">Text 4xl</p>
      <p class="text-3xl">Text 3xl</p>
      <p class="text-2xl">Text 2xl</p>
      <p class="text-xl">Text xl</p>
      <p class="text-lg">Text lg</p>
      <p>Text base</p>
      <p class="text-sm">Text sm</p>
      <p class="text-xs">Text xs</p>
      <p><b>bold</b></p>
      <p><code>code</code></p>
      <p><em>emphasized</em></p>
      <p class="underline">underline</p>
      <p class="overline">overline</p>
      <p class="line-through">line-through</p>
      <p class="no-underline">no-underline</p>
    </div>
  </div>
</main>
